import { SchemaNodeKey } from "@/utils/constants";
import { gotoPage } from "@/utils/routerUtil";
import { RouterPath } from "../../../../enums/routerPath";
import SelectDeptList from "../../SelectDeptList";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
/**
 * 简单、相对固定的基础信息：scheme中的basic部分字段，
 */
//根据Schema绘制基本信息
export default defineComponent({
	props: {
		visible: {
			type: Boolean,
			default() {
				return false;
			}
		}
	},
	emits: [],
	setup(props) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const deviceInfo = inject<any>(SchemaNodeKey.detailInfo);
		return () => {
			return (
				<>
					<div class="block-simple pt-4 pb-4">
						<div class="grid grid-cols-4">
							<div class="flex item">
								<div class="info-title text-right w-1/3">SN</div>
								<div class="info-text flex-1">{deviceInfo.detail.sn || "--"}</div>
							</div>
							<div class="flex item">
								<div class="info-title text-right w-1/3">{proxy?.$t("simpleinfo.tabtitle.name")}</div>
								<div class="info-text flex-1">
									{props.visible ? <el-input v-model={deviceInfo.detail.name} /> : deviceInfo.detail.name}
								</div>
							</div>
							<div class="flex item">
								<div class="info-title text-right w-1/3">{proxy?.$t("simpleinfo.tabtitle.gatewaysn")}</div>
								<div class="info-text flex-1">
									{deviceInfo.detail.gatewaySn ? (
										<el-link
											type="primary"
											title="查看网关"
											onClick={() => gotoPage(RouterPath.gatewayDetail, { sn: deviceInfo.detail.gatewaySn })}
										>
											{deviceInfo.detail.gatewaySn}
										</el-link>
									) : (
										"--"
									)}
								</div>
							</div>
							<div class="flex item">
								<div class="info-title text-right w-1/3">{proxy?.$t("simpleinfo.tabtitle.deptname")}</div>
								<div class="info-text flex-1">
									{props.visible ? <SelectDeptList detail={deviceInfo.detail} /> : deviceInfo.detail.deptName || "--"}
								</div>
							</div>
						</div>
					</div>
				</>
			);
		};
	}
});
